<template>
    <el-dialog title="互评情况详情" v-model="openPeopleEvaluate" width="49%" append-to-body>
      <div class="dialog-top-line"></div>
      <el-form :model="queryPeopleEvalParams" ref="queryPeopleEvalRef" :inline="true" label-width="109px">
        <div style="margin: 10px; display: flex; justify-content: space-between;">
            <div style="width: 50%">
            <el-form-item label="所属党组织" prop="reviewedUserDept" style="width: 100%;">
              <el-tree-select
                v-model="queryPeopleEvalParams.reviewedUserDept"
                :data="deptOptions"
                :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                value-key="deptId"
                placeholder="请选择所属党组织"
                check-strictly
                style="width: 100%"
              />
            </el-form-item>
            </div>
            <div class="top-right-btn" :style="style">
            <el-row>
                <el-button icon="Refresh" @click="resetPeopleEvalQuery">重置</el-button>
                <el-button type="danger" icon="Search" @click="handlePeopleEvalQuery">查询</el-button>
            </el-row>
            </div>
        </div>
      </el-form>
      <el-table :data="evaluateList">
        <el-table-column label="姓名" align="left" prop="reviewedUserName" width="200"/>
        <el-table-column label="所属组织" align="left" prop="reviewedUserDeptName" min-width="200"/>
        <el-table-column label="评定结果" align="left" prop="grade" width="200">
            <template #default="scope">
                <dict-tag :options="pb_evaluate_result" :value="scope.row.grade" />
            </template>
        </el-table-column>
        <el-table-column label="状态" align="left" width="200">
          <template #default="scope">
              <span v-if="scope.row.grade!=null">已评定</span>
              <span v-else>未评定</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" class-name="small-padding fixed-width" min-width="200">
          <template #default="scope">
            <el-button @click="openPeopleReviewResult(scope.row)" v-if="scope.row.grade==null || scope.row.grade.length==0">评定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="position: relative;right: 0px;">
        <pagination
          v-show="evaluateTotal>0"
          :total="evaluateTotal"
          v-model:page="queryPeopleEvalParams.pageNum"
          v-model:limit="queryPeopleEvalParams.pageSize"
          @pagination="getPeopleEvaluateList"
        />
      </div>
      <div class="dialog-bottom-line"></div>
      <template #footer>
        <div class="dialog-footer" style="margin-top: 39px;">
          <el-button @click="cancelPeopleEvaluate">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
    <people-review-result ref="peopleReviewResultRef" @callBack="getPeopleEvaluateList"/>
</template>

<script setup>
import { myReviewUsers } from "@/api/partybuilding/Review";
import PeopleReviewResult from './PeopleReviewResult.vue'
import { listOrg } from "@/api/partybuilding/Org";
const emit = defineEmits(['callBack']);
const { proxy } = getCurrentInstance();
const openPeopleEvaluate = ref(false);
const evaluateList = ref([]);
const evaluateTotal = ref(0);
const deptOptions = ref(undefined);
const peopleReviewResultRef = ref(null);
const { pb_evaluate_result } = proxy.useDict("pb_evaluate_result");

const data = reactive({
  queryPeopleEvalParams: {
    pageNum: 1,
    pageSize: 10,
    reviewId: null,
    reviewedUserDept: null
  },
});
const { queryPeopleEvalParams } = toRefs(data);

// 外部调用方法---显示互评弹窗
const showPeopleEvalDlg = (reviewId) => {
    queryPeopleEvalParams.value.reviewId = reviewId;
    getPeopleEvaluateList();
    openPeopleEvaluate.value = true;
};

defineExpose({
    showPeopleEvalDlg
});

// 查询互评列表
function getPeopleEvaluateList() {
  myReviewUsers(queryPeopleEvalParams.value).then(response => {
    evaluateList.value = response.rows;
    evaluateTotal.value = response.total;
  });
}

// 搜索互评
function handlePeopleEvalQuery() {
  getPeopleEvaluateList();
}

// 重置互评查询条件
function resetPeopleEvalQuery() {
  proxy.resetForm("queryPeopleEvalRef");
  handlePeopleEvalQuery();
}

// 关闭互评弹窗
function cancelPeopleEvaluate() {
    openPeopleEvaluate.value = false;
    emit('callBack', null);
}

// 打开评定弹窗
function openPeopleReviewResult(row) {
    proxy.$refs.peopleReviewResultRef.showPeopleResult(row);
}

/** 查询部门下拉树结构 */
function getDeptTree() {
  listOrg().then(response => {
    deptOptions.value = proxy.handleTree(response.rows, "deptId");
  });
};

getDeptTree()
</script>
<style lang="scss" scoped>
.el-dialog > .el-dialog__body {
  border-top: 1px solid red;
  border-bottom: 1px solid #e9e9e9;
}
.spanUserTitle {
  height: 22px;
  background-color: rgb(255, 255, 255);
  color: rgb(51, 51, 51);
  font-size: 16px;
  text-align: left;
  font-family: PingFangSC-Regular;
}
.itemTogetherTitle {
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-Regular;
    color: rgb(153, 153, 153) !important;
    padding: 19px 59px;
}
.dialog-top-line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  left: 0px;
  top: 49px;
}
.dialog-bottom-line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  left: 0px;
  bottom: 65px;
}
</style>